<template>
  <div
    class="icongroup"
    :style="
      'padding:' +
        data.padding.top / 2 +
        'px ' +
        data.padding.lr / 2 +
        'px ' +
        data.padding.bottom / 2 +
        'px '
    "
  >
    <div
      class="container"
      :style="
        'height:' +
          (48 + data.width) * data.rows +
          'px;background:' +
          data.bgcolor +
          ';border-radius:' +
          data.radius.top / 2 +
          'px ' +
          data.radius.top / 2 +
          'px ' +
          data.radius.bottom / 2 +
          'px ' +
          data.radius.bottom / 2 +
          'px;'
      "
    >
      <el-carousel
        :height="(48 + data.width) * data.rows + 'px'"
        :autoplay="false"
        indicator-position="none"
      >
        <el-carousel-item v-for="item in ctabs" :key="item">
          <ul class="bg">
            <li
              class="icon-item"
              :style="'width:' + 100 / data.num + '%;'"
              v-for="(item, i) in data.list.slice(
                0 + data.num * ((item - 1) * data.rows),
                data.num * data.rows * item
              )"
              :key="i"
            >
              <div class="icon-box">
                <!--      <vimage
                :style="bd"
                src="../src/assets/images/btns1.png"
                fit="fit"></vimage> -->
                <!-- <img :src="item.icon" :style="bd"  /> -->
                <vimage :src="item.icon" :style="bd"></vimage>
              </div>
              <p class="title" :style="'color:' + data.textcolor">
                {{ item.text }}
              </p>
            </li>
          </ul>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  computed: {
    //跑马灯面板数
    ctabs() {
      let n = 1;
      switch (this.data.rows) {
        case 1:
          //单行
          n = Math.ceil(this.data.list.length / this.data.num);
          break;
        case 2:
          //双行
          n = Math.ceil(this.data.list.length / (this.data.num * 2));
          break;
        default:
          break;
      }
      return n;
    },
    bd() {
      let s =
        "width: " + this.data.width + "px; height: " + this.data.width + "px;";
      switch (this.data.type) {
        case 1:
          s = s + "border-radius:0;";
          break;
        case 2:
          s = s + "border-radius:10px;";
          break;
        case 3:
          s = s + "border-radius:50%;";
          break;
        default:
          break;
      }
      return s;
    }
  }
};
</script>

<style lang="scss" scoped>
.icongroup {
  .bg {
    display: flex;
    flex-wrap: wrap;

    .icon-item {
      display: flex;
      flex-direction: column;
      // height: 85px;

      .icon-box {
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        position: relative;
        padding: 16px 0 8px;

        .img-box {
          width: 80px;
          height: 80px;
          overflow: hidden;

          img {
            width: 100%;
          }
        }

        .custom-icon {
          font-size: 28px;
          height: 28px;
          line-height: 28px;
          display: flex;
          flex-direction: column;
        }
      }
      .title {
        text-align: center;
        margin: 0 auto;
        font-size: 12px;
        line-height: 17px;
      }
    }
  }
}
</style>
